@import "src/sass/global/mixin";

$clr: #F6A623;
$bdr: 1px solid #F6A623;
$coin-size: 8px;

#workersMap {
    .map-con {
        width: 100%;
        height: 100%;
        .person-list {
            width: 290px;
            float: left;
            height: 100%;
            overflow-y: auto;
            box-shadow: 0px 10px 20px 0 rgba(0,0,0,0.2);
            position: relative;
            z-index: 1;
        }
        .map-pic {
            margin-left: 290px;
            position: relative;
            height: 100%;
        }
    }
    .progress-bar {
        width: 60px;
        height: 10px;    
        border: $bdr;
        background-color: #FFF;
        border-radius: 5px;
        margin-bottom: 10px;

        .inner-bar {
            width: 30px; // 此值会根据计算变化
            height: 8px;
            border: 1px solid #FFF;
            background-color: $clr;
            border-radius: 4px;
            min-width: 6px;
        }

        display: none;
    }

    .pane {
        position: absolute;
        border-radius: 4px;
        width: 180px;
        bottom: 25px;
        background-color: $clr;
        box-shadow: 0 0 8px 0 rgba(245,166,35,0.50);

        font-size: 12px;
        color: #fff; 

        .progress-bar {
            position: absolute;
            left: 100px;
            top: 20px;
        }
        .pane-date {
            padding: 11px 14px;
            margin: 0;
        }
        .sanjiao {
            width: 28px;
            height: 23px;
            display: block;
            position: absolute;
            bottom: -15px;
            left: 50%;
            margin-left: -14px;
            background: url('{{MIMAGE}}/sanjiao.png') no-repeat;
            background-size: 28px auto;
        }

        display: none;
       
    }
    .panegress {
        bottom: 51px;
        z-index: 10;
        .sanjiao {
            margin-left: -16px;
        }
    }
    .pane-yellow {
        padding: 9px 14px 0;
        font-size: 14px;
        color: #fff;
        span {
            float: left;
            margin-right: 14px;
            display: inline;
        }
        .progress-bar {
            position: static;
            margin-top: 4px;
        }
        .worker-name {
            font-weight: 700;
            width: 60px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .panegress .pane-date{
        padding-top: 4px;
    }


    .marker-pin {
        position: relative;
        /* background-color: #000; */

        &>.progress-bar {
            position: absolute;
            left: -23px;
            top: -22px;
        }
        
        .pin {
            overflow: hidden;
	        width: 26px;
            height: 37px;

            .inn {
	            height: 37px;
        		@include background('{{MIMAGE}}/pin-yellow.png')
            }
        }

        &.free .pin .inn {
        	@include background('{{MIMAGE}}/pin-gray.png')
        }

        .pane {
            left: -82px;
        }
    }

    .marker-coin {
        position: relative;
        /* background-color: #000; */
        width: $coin-size;

        .coin {
            width: $coin-size;
            height: $coin-size;
            background-color: $clr;
            border-radius: 4px;
        }

        .pane {
            left: -86px;
        }
    }

    .tpl {
        display: none;

    	z-index: 100;
    	position: absolute;
        left: 300px;
        top: 300px;

        &>div {
            margin-bottom: 100px;
        }
    }

    .worker-list {
        width: 100%;
        height: 100%;
        background: #FFF;
        font-size: 14px;
        background: #FFFFFF;
        border: 1px solid #E3E8EE;

        .title {
            font-size: 15px;
            color: $gray;
            height: 50px;
            line-height: 50px;
            background-color: #E3E8EE;
            em {
                float: left;
                font-style: normal;
                padding-left: 30px;
            }
            .total {
                float: right;
                padding-right: 30px;
            }
        }
        .list-content {
            width: 100%;
            padding: 0;
            li {
                list-style: none;
                height: 40px;
                border-bottom: 1px solid #E3E8EE;
                cursor: pointer;
                line-height: 40px;
                padding: 0 30px;
                .proj-count {
                    float: left;
                    width: 16px;
                    height: 16px;
                    border: 1px solid #666;
                    text-align: center;
                    line-height: 16px;
                    font-size: 12px;
                    color: #666;
                    border-radius: 15px;
                    margin: 11px 8px 0 0;
                    display: inline;
                }
                .no-circle {
                    // border-color: #fff;
                    visibility: hidden;
                }
                .city {
                    float: right;
                    margin: 0px 0px 0 0;
                }
            }
            li:hover {
                background-color: #F8F8F8;
                .name  {
                    color: #333;
                }
                .city {
                    color: #333;
                }
            }
        }
    }

    #container {
        top: 0!important;
    }
}

